<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式AI结构化提示词指南</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Chosen Palette: Slate & Indigo -->
    <!-- Application Structure Plan: The application is structured as a two-column layout. The left column is a fixed navigation menu listing the core methodology and all 20 prompt templates. The right column is the dynamic content area. This design moves away from the linear document format and transforms the guide into an efficient interactive tool. Users can instantly select a prompt from the navigation and view its details and code, with a copy-to-clipboard function for immediate use. This prioritizes quick access and usability, making it a practical reference guide. -->
    <!-- Visualization & Content Choices: The source material is text- and code-based, so traditional data charts are not applicable. The primary 'visualization' is the structured presentation of the content itself. Each prompt template is presented as a distinct, self-contained card with its title, objective, and a formatted code block. The key interaction is the 'copy to clipboard' button for each code block, which enhances usability. This approach directly supports the application's goal of being a practical tool for users to find and use prompts efficiently. No SVG/Mermaid is used. -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
        }

        .content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

        .nav-link.active {
            background-color: #eef2ff;
            color: #4338ca;
            font-weight: 600;
        }

        .code-block {
            background-color: #1e293b;
            color: #f8fafc;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            position: relative;
        }

        .copy-btn {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background-color: #4f46e5;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .copy-btn:hover {
            background-color: #4338ca;
        }
    </style>
</head>

<body class="bg-slate-50 text-slate-800">

    <div class="flex flex-col md:flex-row min-h-screen">
        <!-- Sidebar Navigation -->
        <aside
            class="w-full md:w-1/4 lg:w-1/5 bg-white border-r border-slate-200 p-4 md:fixed md:h-full md:overflow-y-auto">
            <h1 class="text-xl font-bold text-indigo-700 mb-4">结构化提示词指南</h1>
            <nav id="navigation-menu">
                <!-- Navigation links will be injected here by JavaScript -->
            </nav>
        </aside>

        <!-- Main Content -->
        <main class="w-full md:ml-[25%] lg:ml-[20%] p-6 md:p-8">
            <div id="content-container">
                <!-- Content sections will be injected here by JavaScript -->
            </div>
        </main>
    </div>

    <script>
        const contentData = [
            {
                id: 'methodology',
                title: '核心方法论',
                description: '将自然语言指令封装在 **JSON 结构** 中，是提升 AI 输出准确性、一致性和可控性的最佳实践。它将模糊的“请求”转变为清晰、无歧义、机器友好的“指令集”。',
                subsections: [
                    {
                        title: '核心优势',
                        points: [
                            '**清晰无歧义**: JSON 的键值对结构强制我们将指令的不同部分（如角色、任务、上下文、规则）明确分开。',
                            '**高度可控**: 我们可以精确定义 AI 的输出格式，确保结果可以直接被程序消费。',
                            '**稳定一致**: 对于相同的任务，结构化提示词能让 AI 产生更稳定的结果。',
                            '**易于维护**: 调整指令只需修改特定字段，而非重写整个段落。'
                        ]
                    },
                    {
                        title: '通用 JSON 结构设计',
                        description: '这是一个强大且通用的 JSON 提示词结构，可以作为所有指令的基础模板。',
                        code: `{
  "role": "AI的角色定位，例如：你是一位资深的软件架构师。",
  "task_description": "清晰、具体的任务描述，例如：分析用户需求，设计一个可扩展的系统架构。",
  "context": {
    "background": "完成任务所需的所有背景信息，例如：这是一个面向C端的电商平台项目。",
    "input_data": "需要AI处理的核心数据，例如：用户的需求文档全文。"
  },
  "constraints": [
    "必须遵守的规则1，例如：输出必须是中文。",
    "必须遵守的规则2，例如：架构必须遵循微服务原则。",
    "规则3，例如：不要在回复中包含任何解释性文字。"
  ],
  "output_specification": {
    "type": "定义输出的类型，例如：data_extraction | task_plan | pure_code",
    "details": {
      "schema": "根据type，定义具体的输出格式，例如一个JSON Schema。"
    }
  }
}`
                    },
                    {
                        title: '关键：`output_specification` (输出规范)',
                        description: '这个字段是控制 AI 输出的“总开关”，它告诉 AI 应该产出什么类型的结果。',
                        points: [
                            '**数据提取 (`data_extraction`)**: 当你需要 AI 从文本中提取信息并以固定的 JSON 格式返回时使用。',
                            '**任务规划 (`task_plan`)**: 当你需要 AI 分析一个目标，并输出一个包含步骤和优先级的结构化行动计划时使用。',
                            '**纯代码 (`pure_code`)**: 当你需要 AI 只生成代码，不包含任何 Markdown 标记或文字解释时使用。**为了解决AI可能“不回复”的问题，最佳实践是让 AI 输出一个包含代码的 JSON 对象，而不是裸代码字符串。**'
                        ]
                    }
                ]
            },
            {
                id: 'prompt-1',
                title: '1. 内容提取',
                description: '从任意文本中提取关键信息。',
                code: `{
  "role": "你是一个信息提取专家。",
  "task_description": "请从下方的'input_data'中提取指定的实体信息，并严格按照'schema'的格式输出一个JSON对象。",
  "context": {
    "input_data": "【这里粘贴需要分析的文本，例如：张三（电话：13800138000）是ABC科技有限公司的CEO，该公司成立于2023年，总部位于北京。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "不要在JSON对象前后添加任何解释性文字。",
    "如果某个字段在文本中未找到，请使用 null 作为值。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "person_name": "string",
        "phone_number": "string",
        "company_name": "string",
        "founding_year": "integer",
        "location": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-2',
                title: '2. 制定任务',
                description: '将一个宏大目标分解为带优先级的可执行步骤。',
                code: `{
  "role": "你是一位专业的项目管理（PM）专家。",
  "task_description": "请将'input_data'中描述的目标，分解成一个详细的、分阶段的行动计划。以JSON格式输出。",
  "context": {
    "input_data": "【这里输入你的目标，例如：在三个月内上线一款名为'QuickNote'的笔记应用App。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "步骤应包含ID、描述、所属阶段（例如：需求分析、开发、测试、上线）和优先级（高、中、低）。"
  ],
  "output_specification": {
    "type": "task_plan",
    "details": {
      "schema": {
        "project_name": "string",
        "timeline_in_months": "integer",
        "action_plan": [
          {
            "id": "integer",
            "phase": "string",
            "description": "string",
            "priority": "string"
          }
        ]
      }
    }
  }
}`
            },
            {
                id: 'prompt-3',
                title: '3. 联想拓展',
                description: '围绕一个核心主题，进行多维度的联想和拓展。',
                code: `{
  "role": "你是一位富有创意的思维导图专家。",
  "task_description": "请围绕'input_data'中的核心主题，从不同维度进行联想拓展，并以树状JSON结构输出。",
  "context": {
    "input_data": "【这里输入核心主题，例如：可持续生活。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "至少拓展出4个主要分支，每个分支下至少有3个子节点。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "central_topic": "string",
        "expansions": [
          {
            "branch_name": "string",
            "sub_points": ["string"]
          }
        ]
      }
    }
  }
}`
            },
            {
                id: 'prompt-4',
                title: '4. 代码输出',
                description: '根据需求生成纯净、可直接使用的代码。',
                code: `{
  "role": "你是一位精通多种编程语言的资深开发者。",
  "task_description": "请根据'input_data'中的需求，生成指定语言的代码。将代码作为字符串，封装在'schema'指定的JSON对象中输出。",
  "context": {
    "input_data": "【这里输入你的代码需求，例如：写一个Python函数，用于计算斐波那契数列的第n项。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "JSON对象中'code'字段的值必须是完整、语法正确的代码字符串。",
    "不要包含任何Markdown标记或解释。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "language": "python",
        "code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-5',
                title: '5. 代码格式化',
                description: '将杂乱的代码按指定规范格式化。',
                code: `{
  "role": "你是一个严格遵守编码规范的代码格式化工具。",
  "task_description": "请将'input_data'中的代码，严格按照'constraints'中定义的规范进行格式化。将格式化后的代码封装在JSON中输出。",
  "context": {
    "input_data": "【这里粘贴待格式化的代码，例如：<div class=\\"p-4 bg-white rounded shadow\\"><p>Hello</p></div>】"
  },
  "constraints": [
    "对于Vue模板，必须使用'className'替代'class'。",
    "当className属性中的Tailwind类名过多时，必须换行。",
    "换行后的类名必须相对于'className=\\"\\"'的起始位置进行4个空格的缩进。",
    "功能相近的Tailwind类名尽量分组放在一起。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "language": "vue",
        "formatted_code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-6',
                title: '6. 代码质量检测',
                description: '分析代码，找出潜在的质量问题。',
                code: `{
  "role": "你是一位经验丰富的代码审查（Code Review）专家，如同SonarQube一样敏锐。",
  "task_description": "请分析'input_data'中的代码，识别出潜在的坏味道（Code Smell）、逻辑错误、性能问题和可读性问题。以JSON格式输出审查报告。",
  "context": {
    "input_data": "【这里粘贴需要审查的代码】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "每个发现的问题都应包含问题描述、问题类型和建议的修改方案。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "quality_report": [
          {
            "line_number": "integer",
            "issue_type": "string (e.g., Performance, Readability, Bug)",
            "description": "string",
            "suggestion": "string"
          }
        ]
      }
    }
  }
}`
            },
            {
                id: 'prompt-7',
                title: '7. 代码优化方向',
                description: '为现有代码提供具体的优化建议。',
                code: `{
  "role": "你是一位追求极致性能的软件优化工程师。",
  "task_description": "请分析'input_data'中的代码，并从算法复杂度、内存使用、可读性和可维护性四个维度，提供具体的优化方向和建议。以JSON格式输出。",
  "context": {
    "input_data": "【这里粘贴需要优化的代码】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "建议必须是可执行的，并最好能提供优化前后的代码片段对比。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "optimization_suggestions": [
          {
            "dimension": "string (e.g., Algorithm, Memory, Readability, Maintainability)",
            "suggestion": "string",
            "example_before": "string",
            "example_after": "string"
          }
        ]
      }
    }
  }
}`
            },
            {
                id: 'prompt-8',
                title: '8. 算法详解',
                description: '用通俗易懂的语言解释复杂的算法。',
                code: `{
  "role": "你是一位能将复杂概念简单化的计算机科学教授。",
  "task_description": "请详细解释'input_data'中指定的算法。解释应包括核心思想、时间/空间复杂度、应用场景和一个简单的代码实现示例。以JSON格式输出。",
  "context": {
    "input_data": "【这里输入算法名称，例如：快速排序 (QuickSort)】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "解释必须通俗易懂，避免使用过于专业的术语。",
    "代码示例需包含详细注释。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "algorithm_name": "string",
        "core_idea": "string",
        "time_complexity": "string",
        "space_complexity": "string",
        "use_cases": ["string"],
        "code_example": {
          "language": "python",
          "code": "string"
        }
      }
    }
  }
}`
            },
            {
                id: 'prompt-9',
                title: '9. 架构设计',
                description: '根据需求设计宏观的软件系统架构。',
                code: `{
  "role": "你是一位拥有十年以上经验的资深解决方案架构师。",
  "task_description": "请根据'input_data'中的业务需求，设计一个高可用、可扩展的系统架构。输出包含关键组件、技术选型和数据流图描述的JSON。",
  "context": {
    "input_data": "【这里输入业务需求，例如：设计一个支持千万级日活用户的短视频社交App后台系统。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "架构设计需要考虑安全性、成本和可维护性。",
    "技术选型需注明选择该技术的原因。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "project_name": "string",
        "architecture_type": "string (e.g., Microservices, Monolithic, Serverless)",
        "key_components": [
          {
            "component_name": "string",
            "description": "string",
            "tech_stack": "string",
            "reasoning": "string"
          }
        ],
        "data_flow_description": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-10',
                title: '10. 提示词预生成',
                description: '根据一个简单想法，生成一个完整的结构化提示词。',
                code: `{
  "role": "你是一位提示工程（Prompt Engineering）专家。",
  "task_description": "请将'input_data'中的简单想法，扩展成一个完整、高效的结构化JSON提示词。生成的提示词本身应该符合本文档定义的通用结构。",
  "context": {
    "input_data": "【这里输入你的简单想法，例如：我想让AI帮我写一封专业的商业拒绝邮件。】"
  },
  "constraints": [
    "生成的提示词必须是一个有效的JSON对象字符串。",
    "生成的提示词应包含role, task_description, context, constraints, 和 output_specification 字段。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "language": "json",
        "code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-11',
                title: '11. 用户行为分析',
                description: '从原始数据中分析用户行为模式。',
                code: `{
  "role": "你是一位数据分析师，专长于用户行为研究。",
  "task_description": "请分析'input_data'中提供的用户行为日志，识别出主要的用户画像、最受欢迎的功能和潜在的用户流失风险点。以JSON格式输出分析报告。",
  "context": {
    "input_data": "【这里粘贴用户行为数据，可以是JSON、CSV格式的文本等，例如：[{'user_id': 'A', 'action': 'login', 'timestamp': '...'}, {'user_id': 'A', 'action': 'view_product_page', 'item_id': '123'}]】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "分析结果应基于数据，避免主观臆断。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "analysis_summary": {
          "user_profiles": ["string"],
          "popular_features": ["string"],
          "churn_risks": ["string"]
        }
      }
    }
  }
}`
            },
            {
                id: 'prompt-12',
                title: '12. 内容高度精炼总结',
                description: '将长篇文章压缩成几个核心要点。',
                code: `{
  "role": "你是一位能一眼看透文章核心的资深编辑。",
  "task_description": "请将'input_data'中的长篇文章，提炼成不超过5个核心要点（bullet points）。每个要点必须简明扼要，直击核心。以JSON格式输出。",
  "context": {
    "input_data": "【这里粘贴需要总结的长篇文章】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "总结的总字数不应超过100字。",
    "要点必须反映文章的主要论点或信息。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "title": "string",
        "key_takeaways": ["string"]
      }
    }
  }
}`
            },
            {
                id: 'prompt-13',
                title: '13. 任意JSON的语言转换器',
                description: '将一个JSON对象转换为任意编程语言的数据结构定义（如Class, Struct, interface）。',
                code: `{
  "role": "你是一个代码生成器，精通各种语言的类型定义。",
  "task_description": "请将'input_data'中的JSON对象，转换成'target_language'指定的编程语言的类型定义代码。将代码封装在JSON中输出。",
  "context": {
    "input_data": "{\\"user\\": {\\"id\\": 1, \\"name\\": \\"John Doe\\", \\"isActive\\": true}}"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "生成的代码必须是语法正确的，并且能反映出JSON的嵌套结构和数据类型。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "target_language": "TypeScript",
        "code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-14',
                title: '14. CURL转任意标准语言代码',
                description: '将cURL命令转换为等效的、使用标准库的多种语言代码。',
                code: `{
  "role": "你是一个API请求代码生成器，类似Postman的Code a Snippet功能。",
  "task_description": "请将'input_data'中的cURL命令，转换为'target_language'指定的语言中，使用其标准HTTP库发出的等效网络请求代码。将代码封装在JSON中输出。",
  "context": {
    "input_data": "curl -X POST https://api.example.com/v1/users -H 'Content-Type: application/json' -d '{\\"name\\": \\"test\\"}'"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "代码不应依赖任何第三方请求库，除非该语言的标准库不完善（如Node.js的fetch）。",
    "代码必须正确处理请求方法、URL、头部信息和请求体。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "target_language": "Python",
        "code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-15',
                title: '15. 语句润色降重',
                description: '在保持原意的基础上，对句子进行润色和改写，以降低重复率。',
                code: `{
  "role": "你是一位专业的学术编辑和语言大师。",
  "task_description": "请对'input_data'中的文本进行润色和改写。目标是在完全保留核心意思的前提下，使用不同的词汇和句式，使其更具原创性。以JSON格式输出3个不同的版本。",
  "context": {
    "input_data": "【这里输入需要润色降重的句子或段落】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "不得改变原文的核心观点和关键信息。",
    "改写后的版本应在语言风格和表达上有所区别。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "original_text": "string",
        "polished_versions": ["string", "string", "string"]
      }
    }
  }
}`
            },
            {
                id: 'prompt-16',
                title: '16. 页面结构分析助手',
                description: '分析给定的HTML，输出其DOM结构和组件层级的JSON表示。',
                code: `{
  "role": "你是一个前端开发助手，能够理解DOM结构。",
  "task_description": "请分析'input_data'中的HTML代码，并将其转换为一个表示页面组件层级结构的JSON树。每个节点应包含标签名、ID和类名。",
  "context": {
    "input_data": "【这里粘贴HTML代码】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "JSON结构必须能准确反映HTML的父子和兄弟节点关系。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "tag": "string",
        "attributes": {
          "id": "string",
          "class": "string"
        },
        "children": "[...递归结构]"
      }
    }
  }
}`
            },
            {
                id: 'prompt-17',
                title: '17. 页面结构tailwindcss完整复刻',
                description: '根据页面截图或描述，用Vue和Tailwind CSS完整复刻出静态页面。',
                code: `{
  "role": "你是一位精通Vue和Tailwind CSS的前端像素级还原工程师。",
  "task_description": "请根据'input_data'中对页面结构的描述，使用Vue和Tailwind CSS编写一个完整的单文件组件（SFC）来复刻该页面。将代码封装在JSON中输出。",
  "context": {
    "input_data": "【这里详细描述页面布局、组件和样式，例如：一个居中的卡片，包含一个圆形头像、用户名和一段描述文字。卡片有圆角和阴影。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "必须使用Vue 3 Composition API (<script setup>)。",
    "必须严格遵守本指南第5条中的Tailwind CSS代码格式化规范。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "language": "vue",
        "code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-18',
                title: '18. 极简美观代码优化助手',
                description: '将冗长、复杂的代码重构为更简短、更优雅、更易读的形式。',
                code: `{
  "role": "你是一位信奉'Less is More'的软件工程师，是代码界的“断舍离”大师。",
  "task_description": "请将'input_data'中的代码进行重构，使其在功能完全不变的前提下，变得更简洁、更优雅、更符合函数式编程思想。将优化后的代码封装在JSON中输出。",
  "context": {
    "input_data": "【这里粘贴需要重构的冗长代码】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "重构应优先考虑可读性和简洁性，而非微小的性能提升。",
    "可以在JSON中附上重构思路的简要说明。"
  ],
  "output_specification": {
    "type": "pure_code",
    "details": {
      "schema": {
        "language": "javascript",
        "refactoring_rationale": "string",
        "refactored_code": "string"
      }
    }
  }
}`
            },
            {
                id: 'prompt-19',
                title: '19. 代码漏洞分析',
                description: '像安全专家一样，审查代码中可能存在的安全漏洞。',
                code: `{
  "role": "你是一位网络安全专家，精通OWASP Top 10等安全标准。",
  "task_description": "请对'input_data'中的代码进行安全审计，识别出其中可能存在的安全漏洞（如SQL注入、XSS、CSRF、不安全的依赖等）。以JSON格式输出漏洞报告。",
  "context": {
    "input_data": "【这里粘贴需要审计的代码，例如一段后端API处理函数】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "每个发现的漏洞都应包含漏洞类型、风险等级（高、中、低）、受影响的代码行和修复建议。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "vulnerability_report": [
          {
            "vulnerability_type": "string",
            "risk_level": "string",
            "vulnerable_code_line": "integer",
            "description": "string",
            "remediation_suggestion": "string"
          }
        ]
      }
    }
  }
}`
            },
            {
                id: 'prompt-20',
                title: '20. 语句润色智能扩展',
                description: '不仅润色句子，还能在其基础上进行有逻辑的、创造性的扩展。',
                code: `{
  "role": "你是一位既懂逻辑又富于文采的作家。",
  "task_description": "请首先对'input_data'中的核心句子进行润色，然后基于其核心思想，进行有逻辑的、富有洞察力的扩展，生成一个连贯的段落。以JSON格式输出。",
  "context": {
    "input_data": "【这里输入一个核心观点句，例如：结构化提示词能提升AI的准确性。】"
  },
  "constraints": [
    "输出必须是单一、有效的JSON对象。",
    "扩展内容必须紧密围绕核心句子的思想展开，不能偏离主题。",
    "整个段落需要逻辑通顺，文笔流畅。"
  ],
  "output_specification": {
    "type": "data_extraction",
    "details": {
      "schema": {
        "original_sentence": "string",
        "polished_sentence": "string",
        "expanded_paragraph": "string"
      }
    }
  }
}`
            }
        ];

        document.addEventListener('DOMContentLoaded', () => {
            const navMenu = document.getElementById('navigation-menu');
            const contentContainer = document.getElementById('content-container');

            contentData.forEach((item, index) => {
                const navLink = document.createElement('a');
                navLink.href = `#${item.id}`;
                navLink.textContent = item.title;
                navLink.className = 'nav-link block text-slate-600 hover:text-indigo-600 p-2 rounded-md transition-colors duration-200';
                navMenu.appendChild(navLink);

                const contentDiv = document.createElement('div');
                contentDiv.id = item.id;
                contentDiv.className = 'content-section bg-white p-6 rounded-lg shadow-sm';

                let contentHTML = `<h2 class="text-3xl font-bold mb-2 text-slate-900">${item.title}</h2>`;
                if (item.description) {
                    contentHTML += `<p class="text-slate-600 mb-6">${item.description}</p>`;
                }

                if (item.subsections) {
                    item.subsections.forEach(sub => {
                        contentHTML += `<h3 class="text-2xl font-semibold mt-6 mb-2 text-slate-800">${sub.title}</h3>`;
                        if (sub.description) {
                            contentHTML += `<p class="text-slate-600 mb-4">${sub.description}</p>`;
                        }
                        if (sub.points) {
                            contentHTML += '<ul class="list-disc list-inside space-y-2 text-slate-600">';
                            sub.points.forEach(point => {
                                contentHTML += `<li>${point.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')}</li>`;
                            });
                            contentHTML += '</ul>';
                        }
                        if (sub.code) {
                            contentHTML += generateCodeBlock(sub.code);
                        }
                    });
                }

                if (item.code) {
                    contentHTML += generateCodeBlock(item.code);
                }

                contentDiv.innerHTML = contentHTML;
                contentContainer.appendChild(contentDiv);
            });

            function generateCodeBlock(code) {
                return `<div class="code-block mt-4">
                        <button class="copy-btn" onclick="copyCode(this)">复制</button>
                        <pre><code>${escapeHtml(code)}</code></pre>
                    </div>`;
            }

            const navLinks = navMenu.querySelectorAll('.nav-link');
            const contentSections = contentContainer.querySelectorAll('.content-section');

            function switchTab(hash) {
                const targetId = hash ? hash.substring(1) : contentData[0].id;

                let hasActiveTab = false;
                navLinks.forEach(link => {
                    const linkId = link.getAttribute('href').substring(1);
                    if (linkId === targetId) {
                        link.classList.add('active');
                        hasActiveTab = true;
                    } else {
                        link.classList.remove('active');
                    }
                });

                if (!hasActiveTab && navLinks.length > 0) {
                    navLinks[0].classList.add('active');
                }

                contentSections.forEach(section => {
                    if (section.id === targetId) {
                        section.classList.add('active');
                    } else {
                        section.classList.remove('active');
                    }
                });
            }

            navMenu.addEventListener('click', (e) => {
                if (e.target.tagName === 'A') {
                    e.preventDefault();
                    const hash = e.target.getAttribute('href');
                    window.location.hash = hash;
                }
            });

            window.addEventListener('hashchange', () => switchTab(window.location.hash));

            switchTab(window.location.hash);
        });

        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }

        function copyCode(button) {
            const pre = button.nextElementSibling;
            const code = pre.innerText;
            navigator.clipboard.writeText(code).then(() => {
                button.textContent = '已复制!';
                setTimeout(() => {
                    button.textContent = '复制';
                }, 2000);
            }).catch(err => {
                console.error('无法复制: ', err);
                // Fallback for older browsers
                const textArea = document.createElement('textarea');
                textArea.value = code;
                textArea.style.position = 'fixed';
                textArea.style.left = '-9999px';
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                try {
                    document.execCommand('copy');
                    button.textContent = '已复制!';
                    setTimeout(() => {
                        button.textContent = '复制';
                    }, 2000);
                } catch (err) {
                    console.error('Fallback 复制失败: ', err);
                }
                document.body.removeChild(textArea);
            });
        }
    </script>
</body>

</html>